import React, {useEffect, useState} from "react"
import {observerDashboardPageWrapper} from "./ObserverDashboardPageWrapper";
import {getProcurementSupplierDetail, ProcurementSupplierDetail} from "../../apis/ProcurementSupplierApi";
import {Descriptions} from "antd";

export interface ProcurementSupplierDetailPageProps {
    id: number
}

const ProcurementSupplierDetailPage: React.FC<ProcurementSupplierDetailPageProps> = ({id}) => {
    const [data, setData] = useState<ProcurementSupplierDetail>()
    useEffect(() => {
        getProcurementSupplierDetail(id).then(res => res.data).then(setData)
    }, [id]);
    return (
        <>
            {!!data ? <Descriptions title={"供货商信息"}>
                <Descriptions.Item label={"名称"}>{data?.name}</Descriptions.Item>
                {data.selectableBrands.length > 0 ? <Descriptions.Item
                    label={"可选品牌"}>{data.selectableBrands.map(it => it.name).join("，")}</Descriptions.Item> : null}
            </Descriptions> : null}
        </>
    )
}

export default observerDashboardPageWrapper(ProcurementSupplierDetailPage, "procurements/suppliers/{id}", "供货商详情")
